<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>K-Line Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>

<body>
    <div id="klineChart" style="width: 100%; height: 600px;"></div>

    <script>
        // URL to fetch data from
        const dataUrl =
            'https://push2.eastmoney.com/api/qt/stock/trends2/get?secid=1.000001&fields1=f1,f2,f3,f4,f5,f6,f7,f8,f9,f10,f11,f12,f13&fields2=f51,f53,f56,f58&iscr=0&iscca=0&ndays=1';
        // Replace with your actual URL

        // Initialize ECharts
        const chart = echarts.init(document.getElementById('klineChart'));

        // Fetch data and render chart
        fetch(dataUrl)
            .then(response => response.json())
            .then(response => {
                // Extract and parse data from the response
                const trendsData = response.data.trends.map(item => {
                    const [date, price, volume, avgPrice] = item.split(',');
                    return {
                        date,
                        price: parseFloat(price),
                        volume: parseInt(volume),
                        avgPrice: parseFloat(avgPrice)
                    };
                });

                // Prepare data for the chart
                const dates = trendsData.map(item => item.date);
                const prices = trendsData.map(item => item.price);
                const volumes = trendsData.map(item => item.volume);
                const baseline = prices[0];
                const percentageChanges = prices.map(price => ((price - baseline) / baseline) * 100);

                // ECharts configuration
                const option = {
                    // title: {
                    //     text: `${response.data.name} (${response.data.code}) K-Line Chart`
                    // },
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params) {
                            const price = prices[params[0].dataIndex];
                            const volume = volumes[params[1].dataIndex];
                            return `${params[0].name}<br />Price: ${price}<br />Change:
                            ${params[0].value.toFixed(2)}%<br />Volume: ${(volume/10000).toFixed(2)}万`;
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: dates,
                        boundaryGap: false,
                        axisLabel: {
                            show: false // Hide x-axis labels
                        },
                        show: false // Hide x-axis
                    },
                    yAxis: [{
                            type: 'value',
                            name: 'Change (%)',
                            axisLabel: {
                                show: false
                            }, // Hide y-axis labels for percentage
                            splitLine: {
                                show: false
                            } // Hide grid lines

                        },
                        {
                            type: 'value',
                            name: 'Volume',
                            axisLabel: {
                                show: false
                            }, // Show y-axis labels for volume
                            splitLine: {
                                show: false
                            } // Hide grid lines

                        }
                    ],
                    series: [{
                            name: 'Price',
                            type: 'line',
                            data: percentageChanges,
                            smooth: true,
                            lineStyle: {
                                color: 'blue'
                            },
                            yAxisIndex: 0 // Aligns with the percentage y-axis
                        },
                        {
                            name: 'Volume',
                            type: 'bar',
                            data: volumes.map((vol, idx) => ({
                                value: vol,
                                itemStyle: {
                                    color: prices[idx] > prices[idx - 1] ? 'red' :
                                        'green' // Red if price increased, green if decreased
                                }
                            })),
                            yAxisIndex: 1, // Aligns with the volume y-axis
                            barWidth: '50%'
                        }
                    ]
                };

                // Render the chart
                chart.setOption(option);
            })
            .catch(error => {
                console.error('Error fetching data:', error);
            });
    </script>
</body>

</html>